<script lang="ts" setup>
import { provide, ref } from 'vue'
import DelModal from '@/components/modal/DelModal.vue'
import type { UserItem } from '../users/dto/get-user.dto'
import type { FormItem, formValueItem } from '@/components/Form.vue'
import addEditModal from '@/components/modal/AddEditModal.vue'

// 模态框表单字段
const formSchema: FormItem[] = [
  {
    field: '菜单名：',
    type: 'input',
    prop: 'menuname',
    value: '',
    attr: {
      placeholder: '请输入菜单名称'
    }
  },
  {
    field: '菜单路径：',
    type: 'input',
    prop: 'menupath',
    value: '',
    attr: {
      placeholder: '请输入菜单路径'
    }
  },
  {
    field: '菜单排序：',
    type: 'input',
    prop: 'menusort',
    value: '',
    attr: {
      placeholder: '请输入菜单排序'
    }
  },
  {
    field: '允许的操作策略：',
    type: 'checkbox',
    prop: 'tactics',
    value: [],
    children: [
      {
        // 创建
        field: 'CREATE',
        value: 1
      },
      {
        // 更新
        field: 'UPDATE',
        value: 2
      },
      {
        // 删除
        field: 'DELETE',
        value: 3
      },
      {
        // 读取
        field: 'READ',
        value: 4
      },
      {
        // 管理
        field: 'MANAGE',
        value: 5
      }
    ]
  }
]
// 将formSchema表单传递给form组件
provide('formSchema', formSchema)
// 临时数据
const tempItem = ref()

// 将打开编辑之后的tempItem传递给form,进行数据填充
provide('tempItem', tempItem)
const msg = ref('编辑')
// 编辑/新增模态框控制
const editRefS = ref()
// 控制删除框显示隐藏
const delShow = ref(false)

// 控制模态框
const openModal = (type: string, item?: UserItem) => {
  if (type === 'del') {
    delShow.value = true
  } else if (type === 'add') {
    msg.value = '新增'
    editRefS.value.show()
  } else if (type === 'edit') {
    msg.value = '编辑'
    editRefS.value.show()
  }
}
// 编辑/新增服务
const editSubmit = (val: formValueItem) => {
  console.log('🚀 ~ editSubmit ~ val:', val)
  if (msg.value === '新增') {
    console.log('新增')
  } else if (msg.value === '编辑') {
    console.log('编辑')
  }
}
// 删除服务
const delSubmit = () => {
  console.log('删除')
}
</script>
<template>
  <div>
    <div class="mb-3">
      <button type="button" class="btn btn-primary" @click="openModal('add')">
        <i class="fas fa-plus"></i>新增
      </button>
    </div>
    <!-- 表格 -->
    <table class="table table-bordered table-hover table-striped fs-6">
      <thead>
        <tr>
          <th scope="col">序号</th>
          <th scope="col" style="width: 10%">菜单名称</th>
          <th scope="col" style="width: 25%">菜单路径</th>
          <th scope="col">排序</th>
          <th scope="col" style="width: 25%">操作策略</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <!-- 序号 = (当前页-1) * 偏移量 + index + 1 -->
          <th scope="row">1</th>
          <td>首页</td>
          <td>/dashboard</td>
          <td>1</td>
          <td>READ,UPDATE</td>
          <td>
            <button
              type="button"
              class="btn btn-secondary px-3 me-2"
              @click="openModal('edit')"
            >
              <i class="fa-regular fa-pen-to-square me-2"></i>编辑</button
            ><button type="button" class="btn btn-danger px-3" @click="openModal('del')">
              <i class="fa-solid fa-trash me-2"></i>删除
            </button>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 模态弹框 新增/编辑/删除-->
    <!-- add/editModal -->
    <addEditModal :msg="msg" ref="editRefS" @editSubmit="editSubmit"></addEditModal>

    <!-- delModal -->
    <DelModal v-model="delShow" @delSubmit="delSubmit"></DelModal>
    <!-- 分页 -->
    <nav aria-label="Page navigation example ">
      <ul class="pagination d-flex justify-content-end">
        <li class="page-item">
          <a class="page-link" href="#" ref="pageItems" tabindex="-1" aria-disabled="true"
            >上一页</a
          >
        </li>
        <li class="page-item">
          <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
          <a class="page-link" href="#">下一页</a>
        </li>
      </ul>
    </nav>
  </div>
</template>
<style scoped></style>
